<template>
	<view class="hecheng-view">
		<view class="hecheng-item" v-for="(item,index) in oldbooks" :key="index">
			<view class="item-title">
				{{item.name}}
				<label v-if="item.name=='四大名著'" class="book-hint">*点击书籍可以阅读*</label>
			</view>
			<view class="item-des">{{item.desc}}
			</view>
			<view class="flex-grid-layout">
				<block v-for="(book,index) in item.books" :key="index">
					<view class="content-books" :class="{'content-books_a':item.name=='四大名著'}" @click="item.name=='四大名著'?onBookClick(book):''">{{book}}</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldbooks: []
			}
		},
		onLoad(options) {
			this.getBookMenus()
		},
		methods: {
			getBookMenus() {
        this.$tools.showLoading()
        uniCloud.callFunction({
					name: 'database',
					data: {
						collection: 'oldbook',
						type: 'menu'
					},
					success: (res) => {
            uni.hideLoading()
						console.log(res)
						let result = res.result.data
						if (result && result.length > 0) {
							let oldbooks = result[0].bookmarks
							this.oldbooks = oldbooks
						}
					}
				})
			},
			//书籍点击监听
			onBookClick(bookName) {
				console.log(bookName)
				wx.navigateTo({
					url: 'chapters/chapters?bookName=' + bookName
				})
			}
		}
	}
</script>

<style>
	.hecheng-item {
		margin: 10px;
		border: 1px;
		border-radius: 2px;
		background: #d6cebf;
		padding: 7px;
	}

	.item-title {
		font-size: 17px;
		font-weight: 600;
	}

	.book-hint {
		font-size: 13px;
		color: #55cedf;
		margin: 5px;
	}

	.item-des {
		font-size: 13px;
		color: #666;
		margin-bottom: 7px;
	}

	.content-text {
		word-break: break-all;
		word-wrap: break-word;
		white-space: normal;
		color: black;
		font-size: 15px;
	}
  .content-books{
    font-size: 14px;
    color: #68abcd;
  }
	.content-books_a {
		color: #C39966;
	}
</style>
